<template>
  <div class="con">
    <div class="left">
      <div class="top">
        <div class="title">登录日志</div>
        <div class="tabHeader">
          <div class="user">用户</div>
          <div class="opera">操作</div>
        </div>
        <div class="tabList">
          <ul>
            <li v-for="item in 10" :key="item">
              <div class="user">小红帽</div>
              <div class="opera">登录</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <div class="title">操作日志</div>
        <div class="tabHeader">
          <div class="user">用户</div>
          <div class="opera">操作</div>
        </div>
        <div class="tabList">
          <ul>
            <li v-for="item in 20" :key="item">
              <div class="user">小红帽</div>
              <div class="opera">登录</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="card3">
        <div>
          <div class="con">
            <span class="num">1091</span>
            <span class="title">用户总数</span>
            <span class="eng">Total number of users</span>
          </div>
          <div class="iconImg"></div>
        </div>
        <div>
          <div class="con">
            <span class="num">357</span>
            <span class="title">当日活跃数</span>
            <span class="eng">Number of active days</span>
          </div>
          <div class="iconImg"></div>
        </div>
        <div>
          <div class="con">
            <span class="num">911</span>
            <span class="title">近30日活跃数</span>
            <span class="eng">Monthly Activity Number</span>
          </div>
          <div class="iconImg"></div>
        </div>
      </div>
      <div id="operas1" class="operas1"></div>
      <div id="operas2" class="operas2"></div>
    </div>
    <div class="right">
      <div class="top">
        <div class="title">资源操作实时信息</div>
        <div class="tabHeader">
          <div class="user">用户</div>
          <div class="opera">操作</div>
        </div>
        <div class="tabList">
          <ul>
            <li v-for="item in 10" :key="item">
              <div class="user">小红帽</div>
              <div class="opera">登录</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OperaStatistics",
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          address: "登录",
        },
        {
          name: "王小虎",
          address: "退出",
        },
        {
          name: "王小虎",
          address: "登录",
        },
        {
          name: "王小虎",
          address: "退出",
        },
        {
          name: "王小虎",
          address: "登录",
        },
        {
          name: "王小虎",
          address: "退出",
        },
        {
          name: "王小虎",
          address: "登录",
        },
        {
          name: "王小虎",
          address: "退出",
        },
      ],
    };
  },
  methods: {
    getCharts1() {
      let operas1 = document.getElementById("operas1");
      let myChart = this.$echarts.init(operas1);
      let option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        title: {
          text: "30日操作日志走势",
          padding: [13, 0, 0, 10],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
        },
        yAxis: {
          type: "value",
          axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
        },
        series: [
          {
            data: [120, 432, 901, 534, 290, 130, 20],
            type: "line",

            areaStyle: {
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "#11d56d", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#83bff6", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getBottomTable() {
      let operas2 = document.getElementById("operas2");
      let myChart = this.$echarts.init(operas2);
      let option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        title: {
          text: "日志各项操作次数",
          padding: [13, 0, 0, 10],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [3, 2, 2, 1, 6, 4, 2, 2, 2, 1, 6, 4],
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#11d56d", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#83bff6", // 100% 处的颜色
                },
              ],
            },
            // itemStyle: {
            //   normal: {
            //     //这里是重点
            //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //       {
            //         offset: 0,
            //         color: "#11d56d",
            //       },
            //       {
            //         offset: 1,
            //         color: "#83bff6",
            //       },
            //     ]),
            //   },
            // },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.getBottomTable();
    this.getCharts1();
  },
};
</script>

<style lang="less" scoped>
.con {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  .left {
    height: 100%;
    width: 23%;
    border-radius: 20px;
    margin-right: 10px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      // margin-top: 15px;
      overflow: auto;
      height: 48%;
      background-color: #0c323a;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      border-radius: 20px;
      color: white;
      .title {
        width: 100%;
        text-align: center;
        height: 47px;
        line-height: 47px;
      }
      .tabHeader {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background-color: #00484d;
        line-height: 60px;
        .user {
          width: 50%;
          height: 60px;
          text-align: center;
        }
        .opera {
          width: 50%;
          height: 60px;
          text-align: center;
        }
      }
      .tabList {
        width: 100%;
        height: 280px;
        color: white;
        ul {
          width: 100%;
          padding: 0;
          margin: 0;
          height: 100%;
          overflow: auto;
          li {
            list-style: none;
            display: flex;
            border-bottom: 1px solid #00e7e7;
            line-height: 40px;
            .user {
              width: 50%;
              height: 40px;
              text-align: center;
              border-right: 1px solid #00e7e7;
            }
            .opera {
              width: 50%;
              height: 40px;
              text-align: center;
            }
          }
        }
      }
    }
    .bottom {
      overflow: auto;
      height: 48%;
      background-color: #0c323a;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      border-radius: 20px;
      color:white;
      .title {
        width: 100%;
        text-align: center;
        height: 47px;
        line-height: 47px;
      }
      .tabHeader {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background-color: #00484d;
        line-height: 60px;
        .user {
          width: 50%;
          height: 60px;
          text-align: center;
        }
        .opera {
          width: 50%;
          height: 60px;
          text-align: center;
        }
      }
      .tabList {
        box-sizing: border-box;
        width: 100%;
        height: 280px;
        color: white;
        ul {
          width: 100%;
          padding: 0;
          margin: 0;
          height: 100%;
          overflow: auto;
          li {
            list-style: none;
            display: flex;
            border-bottom: 1px solid #00e7e7;
            line-height: 40px;
            .user {
              width: 50%;
              height: 40px;
              text-align: center;
              border-right: 1px solid #00e7e7;
            }
            .opera {
              width: 50%;
              height: 40px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .center {
    height: 100%;
    width: 52%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // padding: 15px;
    box-sizing: border-box;
    .card3 {
      width: 100%;
      height: 22%;
      display: flex;
      justify-content: space-between;
      div {
        width: 32%;
        height: 100%;
        background-color: #0c323a;
        border-radius: 10px;
        display: flex;
        position: relative;
        .con{
          height: auto;
          display: flex;
          flex-direction: column;
          padding: 0;
          margin-left: 20px;
          margin-top: 20px;
          .num{
            color: #FFFC4C;
            font-size: 60px;
            font-weight: 400;
          }
          .title{
            color: #FFFC4C;
            width: 200px;
            font-size: 20px;
          }
          .eng{
            width: 150px;
            color: white;
            font-size: 12px;
          }
        }
        .iconImg{
          width: 56px;
          height: 50px;
          background-color: red;
          position: absolute;
          top: 50px;
          left: 180px;
        }
      }
    }
    .operas1 {
      width: 100%;
      height: 38%;
      background-color: #0c323a;
      border-radius: 10px;
      // div{
      //   width: 100%!important;
      //   height: 100%!important;
      // }
    }
    .operas2 {
      width: 100%;
      height: 33%;
      background-color: #0c323a;
      border-radius: 10px; 
      // div{
      //   width: 100%!important;
      //   height: 100%!important;
      // }
    }
  }
  .right {
    margin-left: 10px;
    height: 100%;
    width: 25%;
    border-radius: 20px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    .top {
      overflow: auto;
      height: 48%;
      background-color: #0c323a;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      border-radius: 20px;
      color: white;
      .title {
        width: 100%;
        text-align: center;
        height: 47px;
        line-height: 47px;
      }
      .tabHeader {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background-color: #00484d;
        line-height: 60px;
        .user {
          width: 50%;
          height: 60px;
          text-align: center;
        }
        .opera {
          width: 50%;
          height: 60px;
          text-align: center;
        }
      }
      .tabList {
        width: 100%;
        height: 280px;
        color: white;
        ul {
          width: 100%;
          padding: 0;
          margin: 0;
          height: 100%;
          overflow: auto;
          li {
            list-style: none;
            display: flex;
            border-bottom: 1px solid #00e7e7;
            line-height: 40px;
            .user {
              width: 50%;
              height: 40px;
              text-align: center;
              border-right: 1px solid #00e7e7;
            }
            .opera {
              width: 50%;
              height: 40px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>